/**
 * @file _axiom-tag.scss
 * @description AxiomTag 组件样式 - 现代化设计
 */

.axiom-tag {
  // 基础样式
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--axiom-tag-radius);
  font-size: var(--axiom-tag-font-size);
  font-weight: var(--axiom-tag-font-weight);
  line-height: var(--axiom-tag-line-height);
  border: var(--axiom-tag-border-width) solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  padding: var(--axiom-tag-padding);
  box-shadow: var(--axiom-tag-shadow);
  backdrop-filter: var(--axiom-tag-backdrop-filter);
  
  // 内容布局
  &__left {
    display: flex;
    align-items: center;
    margin-right: var(--axiom-tag-content-gap);
  }
  
  &__content {
    display: flex;
    align-items: center;
    min-width: 0;
    
    .axiom-tag__label {
      display: block;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  &__right {
    display: flex;
    align-items: center;
    margin-left: var(--axiom-tag-content-gap);
  }
  
  // 现代化关闭按钮
  &__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--axiom-tag-close-btn-size);
    height: var(--axiom-tag-close-btn-size);
    border: none;
    background: var(--axiom-tag-close-btn-bg);
    border-radius: 50%;
    cursor: pointer;
    margin-left: var(--axiom-tag-close-btn-margin-left);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
    color: inherit; // 从父级 Tag 继承颜色，确保图标可见
    
    .axiom-tag__close-icon {
      width: var(--axiom-tag-close-icon-size);
      height: var(--axiom-tag-close-icon-size);
      color: currentColor; // 确保 SVG 图标能继承父级的颜色
      transition: transform 0.2s ease;
      
      svg {
        width: 100%;
        height: 100%;
      }
    }
    
    &:hover {
      background: var(--axiom-tag-close-btn-bg-hover);
      transform: var(--axiom-tag-close-btn-hover-transform);
      
      .axiom-tag__close-icon {
        transform: var(--axiom-tag-close-icon-hover-transform);
      }
    }
    
    &:active {
      transform: var(--axiom-tag-close-btn-active-transform);
    }
  }

  // 尺寸变体
  &--small {
    padding: var(--axiom-tag-sm-padding);
    font-size: var(--axiom-tag-sm-font-size);
    border-radius: var(--axiom-tag-sm-radius);
    box-shadow: var(--axiom-tag-sm-shadow);
    
    .axiom-tag__close-btn {
      width: var(--axiom-tag-sm-close-btn-size);
      height: var(--axiom-tag-sm-close-btn-size);
      margin-left: var(--axiom-tag-sm-close-btn-margin-left);
      
      .axiom-tag__close-icon {
        width: var(--axiom-tag-sm-close-icon-size);
        height: var(--axiom-tag-sm-close-icon-size);
      }
    }
  }

  &--medium {
    padding: var(--axiom-tag-padding);
    font-size: var(--axiom-tag-font-size);
    border-radius: var(--axiom-tag-radius);
  }

  &--large {
    padding: var(--axiom-tag-lg-padding);
    font-size: var(--axiom-tag-lg-font-size);
    border-radius: var(--axiom-tag-lg-radius);
    box-shadow: var(--axiom-tag-lg-shadow);
    
    .axiom-tag__close-btn {
      width: var(--axiom-tag-lg-close-btn-size);
      height: var(--axiom-tag-lg-close-btn-size);
      margin-left: var(--axiom-tag-lg-close-btn-margin-left);
      
      .axiom-tag__close-icon {
        width: var(--axiom-tag-lg-close-icon-size);
        height: var(--axiom-tag-lg-close-icon-size);
      }
    }
  }

  // 变体样式
  &--filled {
    // 默认填充样式
  }

  &--outline {
    background: transparent !important;
    border-color: currentColor;
    box-shadow: none;
    
    .axiom-tag__close-btn {
      background: var(--axiom-tag-outline-close-btn-bg);
      
      &:hover {
        background: var(--axiom-tag-outline-close-btn-bg-hover);
      }
    }
  }

  &--soft {
    box-shadow: var(--axiom-tag-soft-shadow);
    
    &.axiom-tag--primary {
      background: rgba(var(--primary-color-rgb), 0.1);
      color: var(--primary-color);
    }
    
    &.axiom-tag--success {
      background: rgba(var(--success-color-rgb), 0.1);
      color: var(--success-color);
    }
    
    &.axiom-tag--warning {
      background: rgba(var(--warning-color-rgb), 0.1);
      color: var(--warning-color);
    }
    
    &.axiom-tag--danger {
      background: rgba(var(--danger-color-rgb), 0.1);
      color: var(--danger-color);
    }
    
    &.axiom-tag--info {
      background: rgba(var(--info-color-rgb), 0.1);
      color: var(--info-color);
    }
  }

  // 主题变体
  &--default {
    background: var(--axiom-tag-default-bg);
    color: var(--axiom-tag-default-color);
    border-color: var(--axiom-tag-default-border-color);
  }

  &--primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: var(--text-color-on-primary);
    border-color: var(--primary-color);
  }

  &--success {
    background: linear-gradient(135deg, var(--success-color), var(--success-color-dark));
    color: var(--text-color-on-primary);
    border-color: var(--success-color);
  }

  &--info {
    background: linear-gradient(135deg, var(--info-color), var(--info-color-dark));
    color: var(--text-color-on-primary);
    border-color: var(--info-color);
  }

  &--warning {
    background: linear-gradient(135deg, var(--warning-color), var(--warning-color-dark));
    color: var(--text-color-on-primary);
    border-color: var(--warning-color);
  }

  &--danger {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-color-dark));
    color: var(--text-color-on-primary);
    border-color: var(--danger-color);
  }

  &--gradient {
    background: linear-gradient(135deg, var(--gradient-start-color), var(--gradient-end-color));
    color: white;
    border-color: transparent;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, var(--gradient-hover-start-color), var(--gradient-hover-end-color));
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: inherit;
    }
    
    &:hover::before {
      opacity: 1;
    }
    
    > * {
      position: relative;
      z-index: 1;
    }
  }

  // 交互状态
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  // 可关闭状态调整
  &.is-closable {
    padding-right: 8px;
    
    &.axiom-tag--small {
      padding-right: 6px;
    }
    
    &.axiom-tag--large {
      padding-right: 10px;
    }
  }
}

// 在筛选器中的特殊样式
.c-advanced-filter {
  .axiom-tag {
    margin: 4px 3px;
    font-size: 13px;
    
    &--small {
      font-size: 12px;
      margin: 3px 2px;
    }
    
    // 在筛选器中使用更紧凑的样式
    &:hover {
      transform: translateY(-1px);
    }
  }
}

// 列表中的标签样式优化
.list-item .axiom-tag {
  font-size: 12px;
  padding: 4px 10px;
  margin: 2px 4px 2px 0;
  
  &:last-child {
    margin-right: 0;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .axiom-tag {
    font-size: 12px;
    padding: 6px 12px;
    
    &--large {
      font-size: 14px;
      padding: 8px 16px;
    }
  }
}

html.theme-cyberpunk .axiom-tag {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-color-secondary);
  text-shadow: 0 0 4px var(--text-color-secondary);
  box-shadow: var(--primary-glow);
  backdrop-filter: var(--backdrop-blur);

  &:hover {
    box-shadow: var(--secondary-glow);
    color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
  }

  &--primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
}

html.theme-neon .axiom-tag {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-color-secondary);
  text-shadow: 0 0 4px var(--text-color-secondary);
  box-shadow: 0 0 8px var(--primary-color);
  backdrop-filter: var(--backdrop-blur);

  &:hover {
    box-shadow: var(--primary-glow);
    color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
  }

  &--primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
}

// Rainbow Cyber 主题专属“特效”
html.theme-rainbow-cyber .axiom-tag {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border: none;
  color: var(--text-color-on-primary);
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: tag-shimmer 3s ease-in-out infinite;
  }
}